<template>
  <div class="oList">
    <div class="filter">
      <div>
        付款时间&nbsp;
        <el-date-picker v-model="filter.becomeMemberTime" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
          @change="getDataList" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>
      <div>
        <el-input placeholder="订单编号微信昵称搜索" v-model="filter.searchContent" class="input-with-select">
          <el-button slot="append" @click="getDataList" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <m-table :data="dataList" needHoverBorder class="customerList">
      <template v-slot:header="{ row }">
        <div style="width:100%; position: relative;">
          <span style="margin-right:50px">订单编号：{{ row.orderId }}</span>
          <span>
        <el-popover
          placement="bottom-start"
          width="200"
          trigger="hover"
          :disabled="!row.note"
        >
          <div>备注：{{row.note}}</div>
          <i slot="reference" class="iconfont iconPC-beizhu" :class="{ red: row.note }" @click="triggerRemark(row)"></i>
        </el-popover></span>
        </div>
      </template>
      <m-table-column label="客户信息" v-slot="{ row }" width="240" height="80">
        <div class="info">
          <img class="info__img" :src="row.avatarUrl" alt />
          <div class="info__msg">
            <div class="info__msg--text">{{ row.nikeName }}</div>
          </div>
        </div>
      </m-table-column>
      <m-table-column label="会员等级名称" prop="rankName" />
      <m-table-column prop="payAmount" label="充值金额">
        <!-- <span>¥{{row.investMoney}}</span> -->
      </m-table-column>
      <m-table-column prop="payTime" label="付款时间" />
      <m-table-column prop="usableAmount" v-slot="{ row }" label="可用余额">
        ¥{{ row.usableAmount }}
      </m-table-column>
    </m-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page.sync="pageNum"
      :page-size="pageSize" :pageNum="pageNum" layout="total, prev, pager, next, sizes" :total="total"></el-pagination>
    <RemarkModal title="备注" v-model="remarklVisible" :current-order="currentOrder" :orderIds="orderIds"
      @onOk="handleRemarks" @onCancel="toggleRemarklVisible" />
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component
} from "vue-property-decorator";
import {
  getMemberOrderInfo,
  remarks
} from "@/api/customer/member";
import RemarkModal from "./components/RemarkModal.vue";
import DateUtil from "@/store/modules/date";
import dayjs from "dayjs";

  @Component({
    components: {
      RemarkModal,
    },
  })
export default class Member extends Vue {
    // 过滤条件
    filter = {
      page: 1,
      becomeMemberTime: []
    };

    // 表格数据
    dataList = [];

    // 分页条数
    pageSize = 20;

    // 页码
    pageNum = 1;

    // 总数
    total = 1;

    // 备注visible
    remarklVisible = false;

    /** 当前选中的订单 */
    currentOrder = null;

    /** 选择的订单ID组 */
    orderIds = [];

    created() {
      this.filter.becomeMemberTime = [
        dayjs().startOf("day"),
        dayjs().endOf("day"),
      ];
      this.getDataList();
    }

    getDataList() {
      let newFilter: {
        [propName: string]: any;
      } = this.filter;
      this.filter.becomeMemberTime &&
        this.filter.becomeMemberTime.length > 0 &&
        (newFilter = {
          ...this.filter,
          startTime: this.dateConversion(this.filter.becomeMemberTime[0]),
          endTime: this.dateConversion(this.filter.becomeMemberTime[1]),
        });
      delete newFilter.becomeMemberTime;
      getMemberOrderInfo({
        ...newFilter,
        size: this.pageSize
      }).then(
        ({
          data
        }) => {
          this.dataList = data.list;
          this.total = data.total;
          this.pageNum = data.current;
        },
      );
    }

    toggleRemarklVisible() {
      this.remarklVisible = !this.remarklVisible;
    }

    // 打开描述modal
    triggerRemark(orderData) {
      this.currentOrder = orderData;
      this.orderIds = [this.currentOrder.id];
      this.toggleRemarklVisible();
    }

    /**
     * 备注
     * @param {orderData} 订单数据 如果没有参数为批量操作
     */
    handleRemarks(form ? : any) {
      if (this.currentOrder.note && !form.over) {
        this.toggleRemarklVisible();
        this.getDataList();
        this.$message.success("备注成功");
        return false;
      }
      remarks({
        id: this.orderIds[0],
        ...form,
        state: form.over ? 1 : 0,
        over: void 0,
      })
        .then(() => {
          this.toggleRemarklVisible();
          this.getDataList();
          this.$message.success("备注成功");
        })
        .catch(err => {
          this.$message.warning(err || "备注失败");
        });
    }

    dateConversion(value) {
      const date = new DateUtil("").getYMDHMSs(value);
      return date;
    }

    // 表格分页变化
    handleCurrentChange(page) {
      this.filter = {
        ...this.filter,
        page
      };
      this.getDataList();
    }

    // 表格尺寸变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDataList();
    }
}
</script>

<style lang="scss" scoped>
  @import "../../assets/styles/cutomer/customer";
  @import "@/assets/styles/order/order.scss";

  @include b(filter) {
    display: flex;
    justify-content: space-between;
  }

  @include b(oList) {
    .el-pagination {
      text-align: right;
    }
  }

  @include b(customerList) {
    /deep/ th {
      text-align: left;
    }

    /deep/ .m__table--body .body--content td .item__content {
      justify-content: left;
    }
  }
</style>